import { Meta, Status, Props, Story } from '../../../../.storybook/components';
import * as Stories from './Select.stories';

<Meta of={Stories} />

# Select

<Status variant="stable" />

A select dropdown is a form field that allows users to choose one of the multiple options from a menu.
An example being the expiration date for a users credit card.

<Story of={Stories.Base} />
<Props />

## When to use it

Best used when there are 4 or more defined options to choose from (e.g. Months).If there are less than 4 options,
consider using the radio button component.

## Usage guidelines

- **Do** clearly label the select dropdown so that the user knows what options will be available
- **Do** always provide a default option, typically the placeholder. The default option is not
  selectable but should specify what options will be available.
- **Do** list the options in a logical order. (e.g. Alphabetical, numerical, or in some order that allows the
  user to find the option as easy as possible)
- **Do not** use it to save space or tidy up a form.
- **Do not** use it as a way to filter content
